import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Utility, ReplyDialogueList, Refresh } from 'components';
import * as CommonActions from 'redux/modules/reduxCommon';
import * as TaskActions from 'redux/modules/reduxTask';

@connect(
  state => ({
    Title: state.Common.Title,                                          // 标题
    UrlParams: state.Common.UrlParams,                                 // URL参数
    replyList: state.TaskManager.replyList,
  }),
  { ...CommonActions, ...TaskActions })

export default class ExecutivePeople extends Component {
  static propTypes = {
    UrlParams: PropTypes.object,
    onGetReplyList: PropTypes.func,
    onGetContextList: PropTypes.func,
    onReply: PropTypes.func,
    replyList: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.state = {
      pgIndex: 0,
      detail: { content: '' },
      NextDataComplete: true,
      RefreshComplete: true,
      IsExistsNextData: true,
      peoplelist: {},
      List: [],
      contextList: {},
      testHeigth: 0,
    };
  }

  componentDidMount() {
    Utility.$emit(Utility.constItem.Events.OnEditLeftAction, false);
    this.__getContextList();
    // window.addEventListener('scroll');
    // this.__getHeigth();
  }


  __onRefresh() {
  }

  __getContextList() {
    Utility.$loading();
    const { UrlParams } = this.props;
    const taskId = UrlParams.taskId;
    const { onGetContextList } = this.props;
    onGetContextList(taskId).then((result) => {
      if (result) {
        this.setState({ contextList: result });
      }
      this.__firstGetList();
    }, () => {
      // this.setState({NextDataComplete: true});
      this.__firstGetList();
    });
  }

  __firstGetList() {
    const { UrlParams } = this.props;
    const taskId = UrlParams.taskId;
    const { onGetReplyList } = this.props;
    const Condition = { IsExistsNextData: true };
    onGetReplyList(taskId, Condition).then((result) => {
      Utility.$loadingHide();
      if (result) {
        const {
         replyList
       } = this.props;
        this.setState({ replyList: replyList });
        setTimeout(() => {
          this.setState({ replyList: replyList });
        }, 100);
      }
    }, () => {
      // this.setState({NextDataComplete: true});
      Utility.$loadingHide();
    });
  }

  __onNextData() {
    const { onGetReplyList } = this.props;
    const { replyList } = this.state;
    const { Condition } = replyList || { IsExistsNextData: true };
    if (!Condition.IsExistsNextData) {
      return;
    }
    this.setState({ NextDataComplete: false });
    const { UrlParams } = this.props;
    const taskId = UrlParams.taskId;
    onGetReplyList(taskId, Condition).then((result) => {
      if (result) {
        this.setState({ replyList: this.props.replyList, NextDataComplete: true });
      } else {
        this.setState({ NextDataComplete: true });
      }
    }, () => {
      this.setState({ NextDataComplete: true });
    });
  }

  __send() {
    const input = this.refs.content;
    if (input && input.value && input.value.trim()) {
      const obj = {
        type: 'gocom',
        content: input.value.trim(),
      };
      const {
      UrlParams, onReply
    } = this.props;
      const taskId = UrlParams.taskId;
      Utility.$loading();
      onReply(taskId, obj).then(() => {
        input.value = '';
        this.state.replyList = {};
        this.__firstGetList();
      }, () => {
        Utility.$loadingHide();
        Utility.$showToast('添加回复失败', 'iconError', null, 500);
      });
    } else {
      Utility.$loadingHide();
      Utility.$showToast('输入内容不能为空', 'iconError', null, 500);
    }
  }

  __getHeigth() {
    console.log('__getHeigth');
    const _style = {};
    _style.height = '87vh';
    if (document && document.body) {
      let screenHeigth = document.body.clientHeight;
      screenHeigth = screenHeigth - 40 - 49;
      // this.setState({testHeigth:});
      console.info('screenHeigth', screenHeigth);
      _style.height = screenHeigth + 'px';
    }
    return _style;
  }

  render() {
    const _style = this.__getHeigth();
    const styles = require('./scss/Execute.scss');
    const { RefreshComplete, NextDataComplete, replyList, contextList } = this.state;
    const { Condition, List } = replyList || {};
    const { IsExistsNextData } = Condition || {};
    const { content } = contextList || {};
    return (
      <div className={styles.content}>
        <div className={styles.test} style={_style} ref="test">
          <Refresh RefreshComplete={RefreshComplete} NextDataComplete={NextDataComplete} onRefresh={this.__onRefresh.bind(this)} onNextData={this.__onNextData.bind(this)}>
            <ReplyDialogueList contextList={content} IsShowLoadingComplete={!IsExistsNextData} replyDialogueList={List} />
          </Refresh>
        </div>
        <div className={styles.sendContent}>
          <input className={styles.input} ref="content" placeholder="请输入..." />
          <div className={styles.send} onClick={this.__send.bind(this)}>发送</div>
        </div>
      </div>
    );
  }
}
